<!-- 展示刷短视频的组件 -->
<template>
	<view class="short-video">
		<video 
		:src="item.video_url"
		object-fit="contain"
		class="short-video__content"
		></video>
		
		<view class="short-video__info flex">
			<view class="flex">
				<image class="short-video__info-avatar" :src="item.club_logo" mode="aspectFill"></image>
				<view class="short-video__info-desc flex-column">
					<text>{{item.club_name}}</text>
					<text>{{item.state_time}}</text>
				</view>
			</view>
			
			<image src="/static/video/share.png" mode="aspectFill" class="short-video__share"></image>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item:Object
	})
</script>

<style lang="scss" scoped>
.short-video{
	width: 100%;
	height: 100%;
	background-color: #333333;
	position: relative;
	&__content{
		width: 100%;
		// height: 883rpx;
		height: 100%;
		position: absolute;
		// top: 50%;
		// transform: translateY(-50%);
		// margin-bottom: 140rpx;
	}
	
	// 没有做底部安全区域的计算
	&__info{
		position: absolute;
		// bottom: 50rpx;
		// bottom: 10rpx;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		// padding: 0 33rpx 20rpx 22rpx;
		padding: 20rpx;
		padding-bottom: 50rpx;
		justify-content: space-between;
		background-color: rgba(0, 0, 0, .5);
		
		&-avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 20rpx;
			margin-right: 6rpx;
		}
		
		&-desc{
			color: #fff;
			font-size: 24rpx;
		}
	}
	
	&__share{
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
